<div style="<%= section_styles(section) %>">
  <div class="page-container">
    <div class="flex flex-col max-w-3xl m-auto mt-16 first:mt-0">
      <% if post.image.attached? && post.image.variable? %>
        <%= spree_image_tag(post.image, height: 400, class: 'h-full w-full object-cover object-center', loading: :lazy, alt: post.title) %>
      <% end %>

      <h1 class="uppercase text-2xl font-medium mt-4"><%= post.title %></h1>

      <% if post.published? %>
        <div class="mt-2 text-sm"><%= local_time(post.published_at, '%B %e, %Y') %></div>
      <% end %>

      <div class="mt-8 post-details-content"><%= post.content %></div>
    </div>
  </div>
</div>

<%= render 'spree/posts/json_ld', post: post %>
